<template>
  <div class="incomeRateChart flex-h-sb">
    <div class="chart">
      <div style="margin-top: 40px"></div>
      <div
        v-if="
          fitNetWorth_obj[nameKeyList[0]] &&
          fitNetWorth_obj[nameKeyList[0]].length > 0
        "
      >
        <div
          :id="id"
          :class="className"
          :style="{ height: (height - 40) * 1.6 + 'px', width: width }"
        />
        <div
          :id="`${id}1`"
          :style="{ height: height * 0.72 + 'px', width: width }"
        />
      </div>
      <div
        v-else
        class="flex-vh-center"
        style="height: 565px; margin-top: 24px"
      >
        <img style="color: #666" src="../../../../assets/nodata.png" alt="" />
        <div style="color: #888; font-size: 22px">
          此区间无两个以上净值数据，无法绘制曲线
        </div>
      </div>

      <div
        v-show="
          netWorth_obj[nameKeyList[0]] && netWorth_obj[nameKeyList[0]].length
        "
        class="tip"
      >
        <p>本区间最大回撤：{{ sectionIncomeRate }}%</p>
        <p>({{ sectionDate }})</p>
      </div>
    </div>

    <div
      v-if="
        fitNetWorth_obj[nameKeyList[0]] &&
        fitNetWorth_obj[nameKeyList[0]].length > 0
      "
      class="control"
    >
      <div
        v-show="showBeyondIncome"
        v-if="id != 'contrastChart1'"
        class="beyondIncome flex-h-sb flex-v-center"
      >
        <el-input
          :value="beyondIncome1"
          size="small"
          disabled
          style="width: 45%"
        ></el-input>
        <div class="shortline"></div>
        <indexSelectTree
          ref="indexSelectTree"
          class="bi_indexSelectTree"
          :multiple="false"
          style="width: 45%"
          :indexType.sync="beyondIncome2"
          size="small"
          :clearable="false"
          :realIntoBeyondIncome_name="realIntoBeyondIncome_name"
          @change="beyondIncome2ChangeHandle"
        ></indexSelectTree>
      </div>
      <div
        v-show="showBeyondIncome"
        v-else
        class="beyondIncome flex-h-sb flex-v-center"
      >
        <el-select
          v-model="beyondIncome1"
          size="small"
          @change="beyondIncomeHandle"
          style="width: 45%"
        >
          <el-option
            v-for="item in indexNames1"
            :key="item.key"
            :label="item.name"
            :value="item.gId"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
        <i
          class="iconfont icon-zhihuan"
          @click="transformBeyondIncomeHandle"
        ></i>
        <el-select
          v-model="beyondIncome2"
          size="small"
          @change="beyondIncomeHandle"
          style="width: 45%"
        >
          <el-option
            v-for="item in indexNames2"
            :key="item.key"
            :label="item.name"
            :value="item.gId"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </div>
      <div v-show="showReal" class="showReal flex flex-v-center">
        <el-checkbox
          style="margin: 2px 0 0 14px"
          class="flex-v-center"
          v-model="isShowReal"
          @change="isShowRealChange"
        >
        </el-checkbox>
        <div class="legend-name tof">
          <p style="padding-left: 6px">实盘对比</p>
          <div class="line" :style="`border: 1px solid #5B8FF9;`"></div>
        </div>
        <div @click="$emit('realContrastHnadle')">
          <el-input
            size="small"
            style="margin-left: 12px; width: 300px"
            placeholder="请选择实盘对比产品"
            v-model="realquery.childrenName"
            readonly
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-arrow-right"
              :class="
                realContrastMove
                  ? 'el-icon-circle-close pointer'
                  : 'el-icon-arrow-right'
              "
              @click.stop="clearRealquery"
              @mouseenter="realContrastMove = true"
              @mouseleave="realContrastMove = false"
            ></i>
          </el-input>
        </div>
      </div>
      <div class="legend mt16">
        <div
          class="card flex-h-sb flex-v-center"
          v-for="item in nameLegendsCom"
          :key="item.key"
        >
          <div class="left tof flex-v-center">
            <el-checkbox
              style="margin: 2px 0 0 14px"
              class="flex-v-center"
              :disabled="item.disabled"
              v-model="item.status"
              @change="legendHandle(item.key)"
            ></el-checkbox>
            <div class="legend-name tof">
              <p
                v-if="!item.contrast_type"
                class="tof"
                style="padding-left: 6px"
              >
                {{ item.name }}
              </p>
              <p v-else class="tof" style="padding-left: 6px">
                {{ legendTypeCom(item.contrast_type) }}{{ item.name }}
              </p>
              <!-- <p v-if="!item.contrast_type" class="tof" style="padding-left: 6px;">{{item.name}}[{{item.key}}]</p>
              <p v-else class="tof" style="padding-left: 6px;">{{legendTypeCom(item.contrast_type)}}{{item.name}}[{{item.key}}]</p> -->
              <div
                class="line"
                :style="`border: 1px solid ${item.color};`"
              ></div>
            </div>
          </div>
          <div class="right tof">
            <p>
              {{ legendIncome(item.key) }}（年化{{
                legendAnnualizedIncome(item.key)
              }}）
            </p>
            <p>最大回撤：{{ legendMaxBack(item.key) }}</p>
          </div>
        </div>
        <div class="fillcard"></div>
      </div>
      <div class="showAll">
        <el-button size="small" @click="lineEcahrtsShowAllHandle">{{
          lineEcahrts_showAll ? "取消全选" : "全部勾选"
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "@/components/Charts/mixins/resize";
import {
  findClassifyNetworthByClassifyIdPlus,
  findStrategyIntersection,
} from "@/api/groupManage";
import {
  findCompositionStrategyIntersection,
  findCompareNetworthByClassifyIdPlus,
  findCompareIntersection,
} from "@/api/contrast";
import {
  yAxisNumber,
  xReturnZero,
  randomStr,
  chartDateFreq,
  getWeekData,
  getMonthData,
  listAfterClearNull,
} from "@/utils/pro";
import {
  findCompositionNetworthByCompositionIdNew,
  getStrategyAndCompositionByCompositionIdPlus,
  findClassifyIntersection,
} from "@/api/combManage";
import { parseTime, debounce } from "@/utils";
import { differenceInCalendarMonths } from "date-fns";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";

export default {
  mixins: [resize],
  components: {
    indexSelectTree,
  },
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: Number,
      default: 200,
    },
    id_index: {
      type: Array,
      default: () => {
        return [];
      },
    },
    ids: {
      type: String | Number,
      required: true,
    },
    typePage: {
      type: String,
      default: "",
    },
    userId: {
      type: String | Number,
      default: "",
    },
    realquery: {
      type: Object | Array,
      default: "",
    },
    name1: {
      type: String,
      default: "拟合",
    },
    name2: {
      type: String,
      default: "风险",
    },
    indexNames: {
      type: Array,
      default: () => {
        return [];
      },
    },
    chart_date: {
      type: Array,
      default: () => {
        return [];
      },
    },
    sameSection: {
      // 同区间
      type: Boolean,
      default: false,
    },
    sameSectionReal: {
      // 实盘以来
      type: Boolean,
      default: false,
    },
    dateFreq: {
      // 计算频率
      type: Number,
      default: undefined,
    },
    defaultDateFreq: {
      // 默认频率
      type: Number,
      default: undefined,
    },
    showBeyondIncome: {
      // 超额收益
      type: Boolean,
      default: false,
    },
    contrastList: {
      // 对比详情专属
      type: Array,
      default: () => {
        return [];
      },
    },
    // lineEcahrts_showAll: {
    //   type: Boolean,
    //   default: false
    // },
    warehouseAdjustmentCycle: {
      // 1单利  其余复利
      type: String | Number,
      default: 1,
    },
    showReal: {
      // 显示实盘
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      realIntoBeyondIncome_name: "",
      realIntoBeyondIncome_data: [],

      beyondIncome1: "",
      beyondIncome2: "",
      indexNames1: [],
      indexNames2: [],

      realKey: null, // 实盘
      base_real_i: null,
      freq_base_real_i: null,
      mainKey: null, // 用于保存主轴key

      // 其他实例组
      reals: [],

      chart: null,
      chart1: null,
      startTime: "",
      endTime: "",

      realContrastMove: false,

      currentObj1: {},
      currentObj2: {},

      xDate: [], // y轴
      fitNetWorth_obj: {}, // 收益集合
      netWorth_obj: {}, // 回撤集合

      isIndexList: [], // 记录指数名称数组
      legendStatus: {}, // 记录图例选择状态
      firstInPage: 1, // 记录首次进入页面用

      nameKeyObj: {}, // 曲线名称重复问题，用唯一key记录
      nameKeyList: [], // 唯一key列表
      nameLegends: [], // 自定义图例属性

      day_xDate: [], // 日频y轴
      day_fitNetWorth_obj: {}, // 日频收益集合
      day_netWorth_obj: {}, // 日频回撤集合

      week_xDate: [], // 周频y轴
      week_fitNetWorth_obj: {}, // 周频收益集合
      week_netWorth_obj: {}, // 周频回撤集合

      month_xDate: [], // 月频y轴
      month_fitNetWorth_obj: {}, // 月频收益集合
      month_netWorth_obj: {}, // 月频回撤集合

      color_list: [
        "rgba(225,103,86,1)",
        "rgba(129,183,236,1)",
        "rgba(173,224,255,1)",
        "rgba(255,155,203,1)",
        "#cca4e3",
        "#96ce54",
        "#ff4777",
        "#1685a9",
        "#eedeb0",
        "#0aa344",
        "#f00056",
        "#4b5cc4",
        "#e29c45",
        "rgba(238,203,87,1)",
        "#21a675",
        "#f9906f",
        "#44cef6",
        "#ae7000",
        "#057748",
        "#f05654",
        "#a1afc9",
        "#a78e44",
        "#00e500",
        "#c93756",
        "#065279",
        "#d9b611",
        "#9b4400",
        "#00e09e",
        "#8c4356",
        "#3b2e7e",
        "#7fecad",
        "#f20c00",
        "#426666",
        "#827100",
        "#a4e2c6",
        "#9d2933",
        "#815476",
        "#6e511e",
        "#0eb83a",
        "#b36d61",
        "#edd1d8",
        "#48c0a3",
        "#bf242a",
        "#4c221b",
        "#549688",
        "#60281e",
        "#003371",
        "#789262",
        "#ff7500",
        "#801dae",
        "#758a99",
        "#ffa631",
        "#4c8dae",
        "#50616d",
        "#b0a4e3",
        "#424c50",
        "#fff143",
        "#bce672",
      ],
      contrast_type_list: [
        "策略",
        "分类",
        "组合",
        "投资",
        "子投资",
        "投资组合",
        "指数",
      ],
      api_data: [], // 后端返回曲线数据，需用到净值
      lineEcahrts_showAll: false,

      isShowReal: true,

      realIntoBeyondIncome: false, // 用于记录超额已选实盘
    };
  },
  computed: {
    nameLegendsCom() {
      return this.nameLegends.filter((item) => !item.realTag);
    },
    legendTypeCom() {
      return (type) => {
        // if(type<4) {
        //   return '[' + this.contrast_type_list[type-1] + ']'
        // }else {
        //   return ''
        // }
        return "[" + this.contrast_type_list[type - 1] + "]";
      };
    },
    sectionIncomeRate() {
      if (
        !(
          this.chart1 &&
          this.chart1.getModel() &&
          this.netWorth_obj[this.nameKeyList[0]]
        )
      ) {
        return "";
      }
      const key = this.nameLegends.find((item) => item.main == 1).key;
      const start_i = this.chart1.getModel().option.dataZoom[0].startValue;
      const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
      const list = this.netWorth_obj[key].slice(start_i, end_i + 1);
      const min = Math.min.apply(null, list);
      return min;
    },
    sectionDate() {
      if (
        !(
          this.chart1 &&
          this.chart1.getModel() &&
          this.netWorth_obj[this.nameKeyList[0]]
        )
      ) {
        return "";
      }
      const key = this.nameLegends.find((item) => item.main == 1).key;
      const start_i = this.chart1.getModel().option.dataZoom[0].startValue;
      const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
      const list = this.netWorth_obj[key].slice(start_i, end_i + 1);
      const min = Math.min.apply(null, list);
      const i = list.findIndex((item) => item == min);
      return this.xDate[i + start_i];
    },
    legendIncome() {
      return (key) => {
        if (!this.currentObj1[key]) return "";
        const list = listAfterClearNull(this.currentObj1[key])[0];
        if (!list.length) {
          return "--";
        } else {
          return list[list.length - 1] + "%";
        }
      };
    },
    legendAnnualizedIncome() {
      return (key) => {
        if (!this.currentObj1[key]) return "";
        const list = listAfterClearNull(this.currentObj1[key])[0];
        if (!list.length) return "--";
        const start_i =
          this.chart && this.chart.getModel()
            ? this.chart.getModel().option.dataZoom[0].startValue
            : 0;
        const end_i =
          this.chart && this.chart.getModel()
            ? this.chart.getModel().option.dataZoom[0].endValue
            : list.length - 1;
        const dm = differenceInCalendarMonths(
          this.xDate[end_i],
          this.xDate[start_i]
        )
          ? differenceInCalendarMonths(this.xDate[end_i], this.xDate[start_i])
          : 1;
        const yearAnnualizedincomeRate = (list.slice(-1) / (dm / 12)).toFixed(
          2
        );
        return yearAnnualizedincomeRate + "%";
      };
    },
    legendMaxBack() {
      return (key) => {
        if (!this.currentObj1[key]) return "";
        const list = listAfterClearNull(this.currentObj2[key])[0];
        if (!list.length) return "--";
        const min = Math.min.apply(null, list);
        return Math.abs(min) + "%";
      };
    },
  },
  watch: {
    typePage() {
      if (this.ids) {
        this.legendStatus = {}; // 清除组合穿透时勾选混乱状态
        this.nameKeyObj = {};
        this.nameKeyList = [];
        this.nameLegends = [];
        this.firstInPage = 1;
        this.lineEcahrts_showAll = false;
        this.initPage(this.ids, this.chart_date);
      }
    },
    ids: {
      handler(id) {
        if (id || id == 0) {
          this.initPage(id, this.chart_date);
        }
      },
      deep: true,
      immediate: true,
    },
    id_index: {
      handler(id) {
        if (id.length < 6 && this.ids) {
          this.initPage(this.ids, this.chart_date);
        }
      },
      deep: true,
    },
    chart_date: {
      handler(dates) {
        this.initPage(this.ids, dates);
      },
      deep: true,
    },
    realquery: {
      handler(newVal, oldVal) {
        if (newVal.childrenId || newVal.childrenId == null) {
          this.initPage(this.ids, this.chart_date);
        }
      },
      deep: true,
    },
    dateFreq(i) {
      if (i == 1) {
        this.dayFreqHandle();
      } else if (i == 2) {
        this.weekFreqHandle();
      } else if (i == 3) {
        this.monthFreqHandle();
      }
    },
    showBeyondIncome(val) {
      if (val) {
        if (this.realIntoBeyondIncome && this.realIntoBeyondIncome_name) {
          const i = this.indexNames.findIndex((item) => item.id == -1);
          if (i != -1) {
            this.beyondIncome2 = -1;
            this.beyondIncome2ChangeHandle(this.beyondIncome2);
          }
        } else {
          this.beyondIncomeHandle();
        }
      } else {
        if (this.fitNetWorth_obj["111111"]) {
          delete this.fitNetWorth_obj["111111"];
          delete this.netWorth_obj["111111"];
          delete this.day_fitNetWorth_obj["111111"];
          delete this.day_netWorth_obj["111111"];
          delete this.week_fitNetWorth_obj["111111"];
          delete this.week_netWorth_obj["111111"];
          delete this.month_fitNetWorth_obj["111111"];
          delete this.month_netWorth_obj["111111"];
          delete this.nameKeyObj["111111"];
          this.nameKeyList.shift();
          this.nameLegends.shift();
          this.clearNameLegendsDisabled();

          // 显示超额收益则把其他曲线关闭
          this.nameLegends.forEach((item, i) => {
            const show_mainReal = item.key == this.realKey && this.isShowReal;
            if (!i || show_mainReal) {
              item.status = true;
              this.legendStatus[item.key] = true;
            } else {
              item.status = false;
              this.legendStatus[item.key] = false;
            }
          });

          this.chart && this.chart.dispose();
          this.chart1 && this.chart1.dispose();
          this.$nextTick(() => {
            this.initChart(this.fitNetWorth_obj, this.netWorth_obj);
          });
        }
      }
    },
    indexNames: {
      handler() {
        if (this.id == "contrastChart1") {
          const list = JSON.parse(JSON.stringify(this.indexNames));
          this.indexNames1 = list;
          this.indexNames2 = list;

          this.beyondIncome1 = list[0] ? list[0].gId : "";
          this.beyondIncome2 = list[1] ? list[1].gId : "";
        } else {
          this.beyondIncome1 = this.name1;
          if (this.realIntoBeyondIncome) {
            this.beyondIncome2 = -1;
          } else {
            this.beyondIncome2 = this.indexNames[0].id;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart1.dispose();
    this.chart = null;
    this.chart1 = null;
  },
  methods: {
    lineEcahrtsShowAllHandle() {
      // 显示全部
      this.lineEcahrts_showAll = !this.lineEcahrts_showAll;
      if (this.lineEcahrts_showAll) {
        this.nameLegends.map((item, nl_i) => {
          this.nameLegends[nl_i].status = true;
          this.legendStatus[item.key] = true;

          const nlc_i = this.nameLegendsCom.findIndex(
            (nlc) => nlc.key == item.key
          );
          if (nlc_i != -1) {
            this.$set(this.nameLegendsCom[nlc_i], "status", true);
          }
        });
      } else {
        this.nameLegends.forEach((item, nl_i) => {
          const nlc_i = this.nameLegendsCom.findIndex(
            (nlc) => nlc.key == item.key
          );
          // if(!(item.main || item.contrast_type)) {  // todo contrast_type
          if (!(item.main || item.isIndex || item.disabled)) {
            // 解决对比取消全选失败
            this.nameLegends[nl_i].status = false;
            this.legendStatus[item.key] = false;
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "status", false);
            }
          } else {
            this.nameLegends[nl_i].status = true;
            this.legendStatus[item.key] = true;
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "status", true);
            }
          }
          if (this.id == "contrastChart1" && item.main == 1) {
            this.nameLegends[nl_i].status = false;
            this.legendStatus[item.key] = false;
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "status", false);
            }
          }
        });
      }
      if (this.dateFreq == 1) {
        this.dayFreqHandle();
      } else if (this.dateFreq == 2) {
        this.weekFreqHandle();
      } else if (this.dateFreq == 3) {
        this.monthFreqHandle();
      }
    },
    async initPage(id, dates) {
      let axiosFun = Function;
      // const res = []
      this.realKey = null;
      this.base_real_i = null;

      // 请求后台基础数据
      // if(!this.typePage) {
      // }else if(this.typePage == 'afterManageCom') {
      // }else
      if (this.typePage == "groupManage") {
        if (!this.sameSection) {
          axiosFun = this.findClassifyNetworthByClassifyId;
        } else {
          axiosFun = this.findStrategyIntersection;
        }
      } else if (this.typePage == "combManage") {
        if (!this.sameSection) {
          axiosFun = this.CombManagefindNetworthById;
        } else {
          axiosFun = this.findClassifyIntersection;
        }
      } else if (this.typePage == "combManage-strategy") {
        if (!this.sameSection) {
          axiosFun = this.getStrategyAndCompositionByCompositionIdPlus;
        } else {
          axiosFun = this.findCompositionStrategyIntersection;
        }
      } else if (this.typePage == "contrast") {
        if (!this.sameSection) {
          axiosFun = this.findCompareNetworthByClassifyIdPlus;
        } else {
          axiosFun = this.findCompareIntersection;
        }
      }
      this.api_data = (await axiosFun(id, dates)).body;

      // 初始化显示数据和前端存储数据
      (this.xDate = []),
        (this.day_xDate = []),
        (this.week_xDate = []),
        (this.month_xDate = []);
      (this.fitNetWorth_obj = {}),
        (this.day_fitNetWorth_obj = {}),
        (this.week_fitNetWorth_obj = {}),
        (this.month_fitNetWorth_obj = {});
      (this.netWorth_obj = {}),
        (this.day_netWorth_obj = {}),
        (this.week_netWorth_obj = {}),
        (this.month_netWorth_obj = {});

      // 在legendStatus置空前记录为false的nameKeyObj对象
      const _legendStatus_isFalse_nameList = [];
      const legendStatus_list = Object.keys(this.legendStatus);
      if (legendStatus_list.length) {
        legendStatus_list.map((key) => {
          if (!this.legendStatus[key]) {
            _legendStatus_isFalse_nameList.push(this.nameKeyObj[key]);
          }
        });
      }
      this.nameKeyObj = {};
      this.nameKeyList = [];
      this.nameLegends = [];
      this.reals = [];

      this.api_data[0].item.map((item, i) => {
        // 用key记录曲线name，规避name重复
        const name = item.key;
        const key = randomStr(8);
        this.nameKeyObj[key] = name;
        this.nameKeyList.push(key);
        if (_legendStatus_isFalse_nameList.indexOf(name) != -1) {
          this.legendStatus[key] = false;
        }
        if (i == 0) this.mainKey = key;
        this.nameLegends.push({
          main: i ? 0 : 1, // 主线为1
          name: name,
          key: key,
          id: item.id,
          realTag: item.realTag,
          isIndex: item.isIndex,
          // color: this.color_list[i],
          // color: this.color_list[this.nameLegends.length],
          color: item.realTag
            ? "#5B8FF9"
            : this.color_list[this.nameLegends.length],
          status:
            this.legendStatus[key] != undefined ? this.legendStatus[key] : true,
          contrast_type: item.type ? item.type : null,
        });
        if (item.realTag) {
          // 主实盘
          this.realKey = key;
          this.reals.push({
            key: key,
            name: name,
            mainKey: this.nameLegends[0].key,
            mainName: this.nameLegends[0].name,
          });
        }
      });
      // 多实盘
      this.api_data[0].item.map((item, i) => {
        const r_key = randomStr(8);
        if (item.realKey) {
          const name = this.nameLegends[i].name;
          const key = this.nameLegends[i].key;
          const r_name = item.realKey;
          this.nameKeyObj[r_key] = r_name;
          this.nameKeyList.push(r_key);
          if (_legendStatus_isFalse_nameList.indexOf(r_name) != -1) {
            this.legendStatus[r_key] = false;
          }
          this.reals.push({
            key: r_key,
            name: r_name,
            mainKey: key,
            mainName: name,
          });
          this.nameLegends.push({
            main: 0, // 主线为1
            name: item.realKey,
            key: r_key,
            realTag: true,
            isIndex: null,
            // color: this.color_list[this.nameLegends.length],
            color: "#5B8FF9",
            status:
              this.legendStatus[r_key] != undefined
                ? this.legendStatus[r_key]
                : true,
          });
        }
      });
      console.log("nameLegends", this.nameLegends);

      if (this.api_data && this.api_data.length > 0) {
        const n_list = [];
        const base_incomeRate_drawDown_list = [];
        const base_netWorth_drawDown_list = [];
        // 多实盘
        const other_real = [];
        const base_real_incomeRate_drawDown_list = [];
        let base_real;
        this.api_data.forEach((items, index) => {
          if (
            this.typePage == "groupManage" ||
            this.typePage == "combManage" ||
            this.typePage == "combManage-strategy" ||
            this.typePage == "contrast"
          ) {
            this.xDate.push(parseTime(items.date));
            items.item.map((el, i) => {
              el.webKey = this.nameLegends[i].key;
              el.pnl = el.pnl ? Number(el.pnl) : 0;
              if (n_list[i] == undefined) n_list[i] = 0;
              let or_i = other_real.findIndex(
                (or) => or.name == el.realKey && or.mainName == el.key
              );
              if (el.isIndex) {
                if (index > 0) n_list[i] = (1 + n_list[i]) * (1 + el.pnl) - 1;
              } else if (el.realTag) {
                // el.realTag为主线实盘，其余实盘是后续需求添加，故分开处理
                if (this.reals[0].base_real_i == null && el.netWorth != null) {
                  this.base_real_i = index; // 防止再次进入此if
                  this.freq_base_real_i = index;
                  base_real = items.item[0].incomeRate / 100; // 实例的基准

                  this.reals[0].base_real_i = index;
                  this.reals[0]._base_real_i = index;
                  this.reals[0].base_real = items.item[0].incomeRate / 100;
                  this.reals[0]._base_real = this.reals[0].base_real;
                } else {
                  n_list[i] = Number(n_list[i]) + el.pnl;
                }
              } else {
                if (index > 0) {
                  // if操作等于用pnl归0
                  n_list[i] = Number(n_list[i]) + el.pnl;
                }
                if (el.realKey) {
                  if (or_i == -1) {
                    other_real.push({
                      name: el.realKey,
                      mainName: el.key,
                      addPnl: 0, // 第一个pnl赋0为归0操作
                    });
                    or_i = other_real.length - 1;
                  } else {
                    if (el.realPnl != null) {
                      other_real[or_i].addPnl =
                        Number(other_real[or_i].addPnl) + el.realPnl;
                    }
                  }
                }
                // 首次进入页面图例状态 图例只显示主线和指数线
                if (
                  this.firstInPage == 1 &&
                  el.key != this.name1 &&
                  index == 0
                ) {
                  if (this.id == "contrastChart1") {
                    this.nameLegends.forEach((item, nl_i) => {
                      if (item.contrast_type === el.type && item.id === el.id) {
                        // 两者同时设置才能显示
                        this.nameLegends[nl_i].status = false;
                        this.legendStatus[item.key] = false;
                      }
                    });
                  } else {
                    this.nameLegends.forEach((item, nl_i) => {
                      if (!(item.main || item.contrast_type)) {
                        this.nameLegends[nl_i].status = false;
                        this.legendStatus[item.key] = false;
                      }
                    });
                  }
                }
              }
              if (el.realTag) {
                el.incomeRate =
                  el.netWorth != null
                    ? ((n_list[i] + base_real) * 100).toFixed(2)
                    : null;
              } else {
                if (el.isIndex || this.warehouseAdjustmentCycle == 1) {
                  el.incomeRate =
                    el.netWorth != null ? (n_list[i] * 100).toFixed(2) : null;
                } else {
                  el.incomeRate =
                    el.netWorth != null
                      ? (
                          (n_list[i] * 100) /
                          this.api_data[0].item[0].netWorth
                        ).toFixed(2)
                      : null;
                }
              }
              // el.incomeRate = el.netWorth!=null ? (n_list[i]*100).toFixed(2) : null
              if (!this.fitNetWorth_obj[this.nameKeyList[i]]) {
                this.fitNetWorth_obj[this.nameKeyList[i]] = [];
              }
              if (!this.netWorth_obj[this.nameKeyList[i]]) {
                this.netWorth_obj[this.nameKeyList[i]] = [];
              }
              this.fitNetWorth_obj[this.nameKeyList[i]].push(el.incomeRate);
              if (el.incomeRate == null) {
                this.netWorth_obj[this.nameKeyList[i]][index] = null;
              } else if (
                Number(el.incomeRate) < Number(base_incomeRate_drawDown_list[i])
              ) {
                if (el.isIndex) {
                  this.netWorth_obj[this.nameKeyList[i]][index] = (
                    ((el.incomeRate - base_incomeRate_drawDown_list[i]) /
                      (Number(base_incomeRate_drawDown_list[i]) + 100)) *
                    100
                  ).toFixed(2);
                  // this.netWorth_obj[this.nameKeyList[i]][index] = ((el.incomeRate-base_incomeRate_drawDown_list[i])/base_netWorth_drawDown_list[i]).toFixed(2)
                } else {
                  if (this.warehouseAdjustmentCycle == 1 || el.realTag) {
                    this.netWorth_obj[this.nameKeyList[i]][index] = (
                      el.incomeRate - base_incomeRate_drawDown_list[i]
                    ).toFixed(2);
                  } else {
                    // this.netWorth_obj[this.nameKeyList[i]][index] = (((el.incomeRate-base_incomeRate_drawDown_list[i])/(Number(base_incomeRate_drawDown_list[i])+100))*100).toFixed(2)
                    this.netWorth_obj[this.nameKeyList[i]][index] = (
                      (el.incomeRate - base_incomeRate_drawDown_list[i]) /
                      base_netWorth_drawDown_list[0]
                    ).toFixed(2);
                  }
                }
              } else {
                base_incomeRate_drawDown_list[i] = el.incomeRate;
                base_netWorth_drawDown_list[i] = el.incomeRate / 100 + 1;
                this.netWorth_obj[this.nameKeyList[i]][index] = 0;
              }

              // 多实盘
              if (el.realKey) {
                const real_i = this.reals.findIndex(
                  (item) => item.name == el.realKey && item.mainName == el.key
                );
                if (!this.fitNetWorth_obj[this.reals[real_i].key]) {
                  this.fitNetWorth_obj[this.reals[real_i].key] = [];
                }
                if (!this.netWorth_obj[this.reals[real_i].key]) {
                  this.netWorth_obj[this.reals[real_i].key] = [];
                }
                if (
                  this.reals[real_i].base_real_i == null &&
                  el.realPnl != null
                ) {
                  this.reals[real_i].base_real_i = index;
                  this.reals[real_i]._base_real_i = index;
                  this.reals[real_i].base_real =
                    other_real[or_i].addPnl + n_list[i];
                }
                el.real_incomeRate =
                  el.realPnl != null
                    ? (
                        (other_real[or_i].addPnl +
                          this.reals[real_i].base_real) *
                        100
                      ).toFixed(2)
                    : null;
                this.fitNetWorth_obj[this.reals[real_i].key].push(
                  el.real_incomeRate
                );

                if (el.real_incomeRate == null) {
                  this.netWorth_obj[this.reals[real_i].key][index] = null;
                } else if (
                  Number(el.real_incomeRate) <
                  Number(base_real_incomeRate_drawDown_list[i])
                ) {
                  if (el.isIndex) {
                    this.netWorth_obj[this.reals[real_i].key][index] = (
                      ((el.real_incomeRate -
                        base_real_incomeRate_drawDown_list[i]) /
                        (Number(base_real_incomeRate_drawDown_list[i]) + 100)) *
                      100
                    ).toFixed(2);
                  } else {
                    this.netWorth_obj[this.reals[real_i].key][index] = (
                      el.real_incomeRate - base_real_incomeRate_drawDown_list[i]
                    ).toFixed(2);
                  }
                } else {
                  base_real_incomeRate_drawDown_list[i] = el.real_incomeRate;
                  this.netWorth_obj[this.reals[real_i].key][index] = 0;
                }
              }
            });
          }
        });
        this.currentObj1 = this.fitNetWorth_obj;
        this.currentObj2 = this.netWorth_obj;
        this.isIndexList = this.api_data[0].item
          .filter((e) => e.isIndex)
          .map((e) => e.webKey);

        // 实盘加入超额可选
        this.addRealIntoBeyondIncome();

        const _defaultDateFreq = chartDateFreq(this.xDate);

        this.$emit("update:defaultDateFreq", _defaultDateFreq);
        const _dateFreq = _defaultDateFreq;
        _dateFreq == 1
          ? (this.day_xDate = this.xDate)
          : _dateFreq == 2
          ? (this.week_xDate = this.xDate)
          : (this.month_xDate = this.xDate);
        _dateFreq == 1
          ? (this.day_fitNetWorth_obj = this.fitNetWorth_obj)
          : _dateFreq == 2
          ? (this.week_fitNetWorth_obj = this.fitNetWorth_obj)
          : (this.month_fitNetWorth_obj = this.fitNetWorth_obj);
        _dateFreq == 1
          ? (this.day_netWorth_obj = this.netWorth_obj)
          : _dateFreq == 2
          ? (this.week_netWorth_obj = this.netWorth_obj)
          : (this.month_netWorth_obj = this.netWorth_obj);

        if (this.dateFreq == undefined || this.dateFreq != _defaultDateFreq) {
          this.$emit("update:dateFreq", _dateFreq); // 一般为首次进入，则_dateFreq==_defaultDateFreq，watch触发绘制默认频率
        } else {
          if (this.dateFreq != _dateFreq) {
            // 当前选中不为默认频率，则绘制选中频率
            if (this.dateFreq == 1) {
              this.dayFreqHandle();
            } else if (this.dateFreq == 2) {
              this.weekFreqHandle();
            } else {
              this.monthFreqHandle();
            }
          } else {
            // 当前选中等于默认频率，直接绘制
            this.draw();
          }
        }
      }
    },

    initChart(obj1, obj2) {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart1 = echarts.init(document.getElementById(this.id + "1"));

      let all_list_obj1 = [];
      const series_obj1 = [];
      const series_obj2 = [];

      const start_i = this.chart.getModel()
        ? this.chart.getModel().option.dataZoom[0].startValue
        : 0;
      const end_i = this.chart.getModel()
        ? this.chart.getModel().option.dataZoom[0].endValue
        : obj1[this.nameKeyList[0]].length;
      const view_obj = [{}, {}];

      if (Object.keys(obj1).length) {
        Object.keys(obj1).forEach((key) => {
          const color = this.nameLegends.find((nl) => nl.key == key).color;
          view_obj[0][key] = obj1[key].slice(start_i, end_i);
          const item = obj1[key];
          const nl_obj = this.nameLegends.find((nl) => nl.key == key);
          if (nl_obj.status) all_list_obj1 = [...all_list_obj1, ...item]; // 收集参与y轴计算的数据
          series_obj1.push({
            name: key,
            type: "line",
            symbolSize: 2,
            symbol: "emptyCircle",
            showSymbol: false,
            lineStyle: {
              width: 1.6,
            },
            itemStyle: {
              color,
            },
            data: item,
            connectNulls: true,
          });
        });
      }
      const yVal = yAxisNumber(all_list_obj1);

      if (Object.keys(obj2).length) {
        Object.keys(obj2).forEach((key, i) => {
          const color = this.nameLegends.find((nl) => nl.key == key).color;
          view_obj[1][key] = obj2[key].slice(start_i, end_i);
          let _key = key;
          if (
            i == 0 &&
            this.id == "groupManageChart1" &&
            key != Object.keys(obj1)[0]
          ) {
            _key = Object.keys(obj1)[0]; // 解决 分类详情下只有一条策略时，回撤标题为'默认分类'问题  兼容接口代码
          }
          const item = obj2[key];
          series_obj2.push({
            name: _key,
            type: "line",
            symbolSize: 2,
            symbol: "emptyCircle",
            showSymbol: false,
            lineStyle: {
              width: 1.6,
            },
            itemStyle: {
              color,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color:
                    _key == "风险" || this.nameLegends[i].main || _key != key
                      ? "rgba(225,103,86,0.2)"
                      : "rgba(0,0,0,0)",
                },
                {
                  offset: 1,
                  color:
                    _key == "风险" || this.nameLegends[i].main || _key != key
                      ? "rgba(225,103,86,0.2)"
                      : "rgba(0,0,0,0)",
                },
              ]),
            },
            data: item,
            connectNulls: true,
          });
          if (this.nameLegends[i].main) {
            series_obj2[i].markLine = {
              // animation: false,
              data: [
                {
                  type: "min",
                },
              ],
              label: {
                show: false,
              },
            };
          }
        });
      }
      view_obj[2] = this.xDate.slice(start_i, end_i);
      view_obj[3] = this.warehouseAdjustmentCycle;
      view_obj[4] = start_i;
      view_obj[5] = this.api_data;
      view_obj[6] = this.nameLegends;
      this.$emit("viewObj", view_obj);

      this.chart.setOption({
        title: {
          left: 52,
          text: "收益",
          top: 10,
          textStyle: {
            color: "#595959",
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff",
            },
          },
          position: (point) => {
            return [point[0] + 15, point[1] - 150];
          },
          appendToBody: true,
          formatter: (params) => {
            const _params = this.sortTooltip(params);
            const params1 = this.chart1.getOption().series;
            let str = "";
            str += `<div style="padding-bottom: 2px;display:flex;justify-content: space-between;"><span>${_params[0].name}</span><span>收益 (回撤)</span></div>`;
            for (let i = 0; i < _params.length; i += 1) {
              let seriesName = this.nameKeyObj[_params[i].seriesName];
              const p1_i = params1.findIndex(
                (item) => item.name == _params[i].seriesName
              );
              seriesName =
                seriesName && seriesName.length > 50
                  ? seriesName.slice(0, 50) + "..."
                  : seriesName;
              if (_params[i].data != null) {
                const real_info = this.reals.find(
                  (item) => item.key == _params[i].seriesName
                );
                if (!real_info) {
                  str += `<div style="display: flex;justify-content: space-between;">
                      <div style="display: flex;align-items: center;">
                        ${_params[i].marker}
                        <span class="proName_tof" style="flex:1;">${seriesName}</span>
                      </div>
                      <span style="margin-left: 10px;font-weight: bold;">
                       ${_params[i].data}% (${
                    params1[p1_i].data[_params[i].dataIndex]
                  }%)
                      </span>
                      </div>`;
                } else {
                  // 主实例
                  const realTime_baseval =
                    this.chart
                      .getOption()
                      .series.find((item) => item.name == real_info.key).data[
                      real_info.base_real_i
                    ] || 0;
                  const realTime_baseval1 =
                    this.chart1
                      .getOption()
                      .series.find((item) => item.name == real_info.key).data[
                      real_info.base_real_i
                    ] || 0;
                  str += `<div style="display: flex;justify-content: space-between;">
                      <div style="display: flex;align-items: center;">
                        ${_params[i].marker}
                        <span class="proName_tof" style="flex:1;">${seriesName}</span>
                      </div>
                      <span style="margin-left: 10px;font-weight: bold;">
                        ${
                          _params[i].data != null
                            ? (_params[i].data - realTime_baseval).toFixed(2)
                            : _params[i].data
                        }%
                        (${
                          params1[p1_i].data[_params[i].dataIndex] != null
                            ? params1[p1_i].data[_params[i].dataIndex] -
                              realTime_baseval1
                            : null
                        }%)
                      </span>
                      </div>`;
                }
              } else {
                str += `<div style="display: flex;justify-content: space-between;">
                      <div style="display: flex;align-items: center;">
                        ${_params[i].marker}
                        <span class="proName_tof" style="flex:1;">${seriesName}</span>
                      </div>
                      <span style="margin-left: 10px;font-weight: bold;">
                       -- (--%)
                      </span>
                      </div>`;
              }
            }
            return str;
          },
        },
        grid: {
          top: 10,
          left: 55,
          right: 10,
          bottom: "6%",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
          orient: "vertical",
          x: "left",
          left: "82%",
          top: "10%",
          textStyle: {
            color: "#90979c",
            fontSize: 11,
          },
          formatter: (name) => {
            const start_i = this.chart.getModel().option.dataZoom[0].startValue;
            const end_i = this.chart.getModel().option.dataZoom[0].endValue;
            const obj = this.chart
              .getOption()
              .series.find((item) => item.name == name);
            const dm = differenceInCalendarMonths(
              this.xDate[end_i],
              this.xDate[start_i]
            )
              ? differenceInCalendarMonths(
                  this.xDate[end_i],
                  this.xDate[start_i]
                )
              : 1;
            const yearAnnualizedincomeRate = (
              obj.data[end_i] /
              (dm / 12)
            ).toFixed(2);
            return obj.data[end_i]
              ? this.nameKeyObj[name] +
                  "   " +
                  obj.data[end_i] +
                  "%" +
                  " (年化:" +
                  yearAnnualizedincomeRate +
                  "%)"
              : this.nameKeyObj[name] + "   " + "--";
          },
          selected: this.legendStatus,
        },
        calculable: true,
        xAxis: [
          {
            show: false,
            type: "category",
            boundaryGap: false, // 折线从x轴起始开始走
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
              interval: "auto",
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              show: false,
              interval: "auto",
            },
            data: this.xDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: yVal[0],
            max: yVal[1],
            interval: yVal[2],
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                return value.toFixed(2) + "%";
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            show: false,
            type: "slider",
            start: 0,
            end: 100,
            realtime: true,
            height: "0%",
            bottom: "18%",
          },
          {
            show: false,
            realtime: true, // 实时更新系列的视图
            height: "5%",
            bottom: "5%",
          },
        ],
        series: series_obj1,
      });

      this.chart1.setOption({
        title: {
          left: 52,
          text: "回撤",
          top: 10,
          textStyle: {
            color: "#595959",
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff",
            },
          },
          formatter: (params) => {
            return "";
          },
        },
        grid: {
          top: 10,
          left: 55,
          right: 10,
          bottom: "37%",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
          orient: "vertical",
          x: "left",
          left: "82%",
          top: "2%",
          textStyle: {
            color: "#90979c",
            fontSize: 11,
          },
          formatter: (name) => {
            const start_i =
              this.chart1.getModel().option.dataZoom[0].startValue;
            const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
            const list = this.netWorth_obj[name].slice(start_i, end_i + 1);
            const min = Math.min.apply(null, list);
            return this.nameKeyObj[name] + "   " + min + "%";
          },
          selected: this.legendStatus,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false, // 折线从x轴起始开始走
            splitNumber: 8,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
              interval: "auto",
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: "auto",
              margin: 20,
            },
            data: this.xDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                return value + "%";
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            show: false,
            type: "slider",
            start: 0,
            end: 100,
            realtime: true,
            height: "0%",
            bottom: "18%",
          },
          {
            brushSelect: false,
            realtime: true, // 实时更新系列的视图
            height: "14%",
            bottom: "1%",
          },
        ],
        series: series_obj2,
      });

      if (this.typePage == "groupManage" && this.name1 == "模拟组合") {
        // 对比页面
        this.$emit("loadingOk");
      }

      this.chart.on(
        "datazoom",
        debounce(() => {
          const baseline_i =
            this.chart.getModel().option.dataZoom[0].startValue;
          const end_i = this.chart.getModel().option.dataZoom[0].endValue;
          let op = this.chart.getOption();
          let op1 = this.chart1.getOption();
          const op_res = xReturnZero(
            this.fitNetWorth_obj,
            this.netWorth_obj,
            op,
            op1,
            baseline_i,
            end_i,
            this.isIndexList,
            this.warehouseAdjustmentCycle,
            this.reals,
            this.api_data
          );
          op = op_res.op;
          op1 = op_res.op1;

          // 风险指标
          const view_obj = [{}, {}];
          this.currentObj1 = {};
          this.currentObj2 = {};
          Object.keys(this.fitNetWorth_obj).forEach((key) => {
            // view_obj[0][this.nameKeyObj[key]] = this.fitNetWorth_obj[key].slice(baseline_i, end_i)
            // view_obj[1][this.nameKeyObj[key]] = this.netWorth_obj[key].slice(baseline_i, end_i)
            view_obj[0][key] = this.fitNetWorth_obj[key].slice(
              baseline_i,
              end_i
            );
            view_obj[1][key] = this.netWorth_obj[key].slice(baseline_i, end_i);
          });
          view_obj[2] = this.xDate.slice(baseline_i, end_i + 1);
          view_obj[3] = this.warehouseAdjustmentCycle;
          view_obj[4] = baseline_i;
          view_obj[5] = this.api_data;
          view_obj[6] = this.nameLegends;
          this.$emit("viewObj", view_obj);

          const yVal = yAxisNumber(op_res.all_list_obj1);
          op.yAxis[0].min = yVal[0];
          op.yAxis[0].max = yVal[1];
          op.yAxis[0].interval = yVal[2];
          op1.dataZoom[0].start = op.dataZoom[0].start;
          op1.dataZoom[0].end = op.dataZoom[0].end;
          op1.dataZoom[1].start = op.dataZoom[1].start;
          op1.dataZoom[1].end = op.dataZoom[1].end;
          this.chart.setOption(op);
          this.chart1.setOption(op1);
        }, 500)
      );

      this.chart1.on(
        "datazoom",
        debounce(() => {
          const baseline_i =
            this.chart1.getModel().option.dataZoom[0].startValue;
          const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
          let op = this.chart.getOption();
          let op1 = this.chart1.getOption();
          const op_res = xReturnZero(
            this.fitNetWorth_obj,
            this.netWorth_obj,
            op,
            op1,
            baseline_i,
            end_i,
            this.isIndexList,
            this.warehouseAdjustmentCycle,
            this.reals,
            this.api_data
          );
          op = op_res.op;
          op1 = op_res.op1;

          if (this.showBeyondIncome) {
            // 解决超额曲线计算时，副线不和主曲线同长度时计算错误的问题
            let name2;
            if (this.id == "contrastChart1") {
              name2 = this.indexNames.find(
                (item) => item.gId == this.beyondIncome2
              ).name;
            } else {
              name2 = this.indexNames.find(
                (item) => item.id == this.beyondIncome2
              ).name;
            }
            const key2 =
              this.beyondIncome2 == -1
                ? this.realKey
                : this.nameLegends.find((item) => item.name == name2).key;
            const list1 = op.series.find(
              (item) => item.name == this.mainKey
            ).data;
            const list2 = op.series.find((item) => item.name == key2).data;
            const res = this.datazoomGetBeyondIncome(list1, list2)[0];
            op.series.find((item) => item.name == "111111").data = res;
            const yAxisNumber_res = res.slice(baseline_i, end_i);
            op_res.all_list_obj1 = [
              ...op_res.all_list_obj1,
              ...yAxisNumber_res,
            ];
          }

          // 风险指标 & 获取当前显示的数据
          const view_obj = [{}, {}];
          this.currentObj1 = {};
          this.currentObj2 = {};
          Object.keys(this.fitNetWorth_obj).forEach((key) => {
            const _obj1 = op.series.filter((item) => item.name == key)[0];
            const _obj2 = op1.series.filter((item) => item.name == key)[0];
            view_obj[0][key] = _obj1.data.slice(baseline_i, end_i + 1);
            view_obj[1][key] = _obj2.data.slice(baseline_i, end_i + 1);

            // this.currentObj1[key] = view_obj[0][this.nameKeyObj[key]]
            // this.currentObj2[key] = view_obj[1][this.nameKeyObj[key]]
            this.currentObj1[key] = view_obj[0][key];
            this.currentObj2[key] = view_obj[1][key];
          });
          view_obj[2] = this.xDate.slice(baseline_i, end_i + 1);
          view_obj[3] = this.warehouseAdjustmentCycle;
          view_obj[4] = baseline_i;
          view_obj[5] = this.api_data;
          view_obj[6] = this.nameLegends;
          this.$emit("viewObj", view_obj);

          const yVal = yAxisNumber(op_res.all_list_obj1);
          op.yAxis[0].min = yVal[0];
          op.yAxis[0].max = yVal[1];
          op.yAxis[0].interval = yVal[2];
          op.dataZoom[0].start = op1.dataZoom[0].start;
          op.dataZoom[0].end = op1.dataZoom[0].end;
          op.dataZoom[1].start = op1.dataZoom[1].start;
          op.dataZoom[1].end = op1.dataZoom[1].end;
          this.chart.setOption(op);
          this.chart1.setOption(op1);
        }, 500)
      );

      this.chart.on("legendselectchanged", (obj) => {
        let op = this.chart.getOption();
        let op1 = this.chart1.getOption();
        op1.legend[0].selected = obj.selected;

        // 记录图例状态
        this.savaLegendStatus(obj.selected);

        const baseline_i = this.chart1.getModel().option.dataZoom[0].startValue;
        const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
        const op_res = xReturnZero(
          this.fitNetWorth_obj,
          this.netWorth_obj,
          op,
          op1,
          baseline_i,
          end_i,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals,
          this.api_data
        );
        op = op_res.op;
        op1 = op_res.op1;
        const yVal = yAxisNumber(op_res.all_list_obj1);
        op.yAxis[0].min = yVal[0];
        op.yAxis[0].max = yVal[1];
        op.yAxis[0].interval = yVal[2];
        this.chart.setOption(op);
        this.chart1.setOption(op1);
      });

      this.chart1.on("legendselectchanged", (obj) => {
        let op = this.chart.getOption();
        let op1 = this.chart1.getOption();
        op.legend[0].selected = obj.selected;

        // 记录图例状态
        this.savaLegendStatus(obj.selected);

        const baseline_i = this.chart1.getModel().option.dataZoom[0].startValue;
        const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
        const op_res = xReturnZero(
          this.fitNetWorth_obj,
          this.netWorth_obj,
          op,
          op1,
          baseline_i,
          end_i,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals,
          this.api_data
        );
        op = op_res.op;
        op1 = op_res.op1;
        if (this.showBeyondIncome) {
          // 解决超额曲线计算时，副线不和主曲线同长度时计算错误的问题
          const key2 =
            this.beyondIncome2 == -1
              ? this.realKey
              : this.nameLegends.find((item) => item.id == this.beyondIncome2)
                  .key;
          const list1 = op.series.find(
            (item) => item.name == this.mainKey
          ).data;
          const list2 = op.series.find((item) => item.name == key2).data;
          const res = this.datazoomGetBeyondIncome(list1, list2)[0];
          op.series.find((item) => item.name == "111111").data = res;
          op_res.all_list_obj1 = [...op_res.all_list_obj1, ...res];
        }
        const yVal = yAxisNumber(op_res.all_list_obj1);
        op.yAxis[0].min = yVal[0];
        op.yAxis[0].max = yVal[1];
        op.yAxis[0].interval = yVal[2];
        this.chart.setOption(op);
        this.chart1.setOption(op1);
      });

      this.chart.on("highlight", (params) => {
        const obj = params.batch[0];
        this.chart1.dispatchAction({
          type: "showTip",
          seriesIndex: obj.seriesIndex,
          dataIndex: obj.dataIndex,
        });
      });
      this.chart1.on("highlight", (params) => {
        const obj = params.batch[0];
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: obj.seriesIndex,
          dataIndex: obj.dataIndex,
        });
      });

      this.chart.on("globalout", () => {
        this.chart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: -1,
        });
      });
      this.chart1.on("globalout", () => {
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: -1,
        });
      });

      this.firstInPage++;
    },

    clearRealquery() {
      const res = {
        childrenId: null,
        childrenName: null,
        childrenType: null,
      };
      this.$emit("clearRealquery", res);
    },

    sortTooltip(params) {
      const res = JSON.parse(JSON.stringify(params));
      params.forEach((item) => {
        const key = item.seriesName;
        const real_i = this.reals.findIndex((r) => r.key == key);
        if (real_i != -1) {
          const res_real_i = res.findIndex((r) => r.seriesName == key);
          res.splice(res_real_i, 1);
          const res_main_i = res.findIndex(
            (r) => r.seriesName == this.reals[real_i].mainKey
          );
          res.splice(res_main_i + 1, 0, item);
        }
      });
      return res;
    },

    beyondIncomeHandle() {
      if (this.beyondIncome1 == "" || this.beyondIncome2 == "") return;
      this.clearNameLegendsDisabled();
      let name1 = "";
      let name2 = "";
      let key1 = "";
      let key2 = "";
      // 找到选中的两个类目的key
      if (this.id != "contrastChart1") {
        name1 = this.name1;
        name2 = this.indexNames.find(
          (item) => item.id == this.beyondIncome2
        ).name;
        this.nameLegends.map((item, i) => {
          const nlc_i = this.nameLegendsCom.findIndex(
            (nlc) => nlc.key == item.key
          );
          if (item.name == name1) {
            this.nameLegends[i].status = true;
            this.nameLegends[i].disabled = true;
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "status", true);
            }
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "disabled", true);
            }
            key1 = item.key;
          } else if (item.name == name2) {
            this.nameLegends[i].status = true;
            this.nameLegends[i].disabled = true;
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "status", true);
            }
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "disabled", true);
            }
            key2 = item.key;
          } else if (item.realTag) {
            // 实盘在超额下不显示
            this.nameLegends[i].status = false;
            this.legendStatus[item.key] = false;
            if (nlc_i != -1) {
              this.$set(this.nameLegendsCom[nlc_i], "status", false);
            }
          } else {
            if (this.lineEcahrts_showAll) {
              this.nameLegends[i].status = true;
              this.legendStatus[item.key] = true;
              if (nlc_i != -1) {
                this.$set(this.nameLegendsCom[nlc_i], "status", true);
              }
            } else {
              this.nameLegends[i].status = false;
              this.legendStatus[item.key] = false;
              this.nameLegends[i].disabled = false;
              if (nlc_i != -1) {
                this.$set(this.nameLegendsCom[nlc_i], "status", false);
              }
              if (nlc_i != -1) {
                this.$set(this.nameLegendsCom[nlc_i], "disabled", false);
              }
            }
          }
        });
      } else {
        const list = [];
        this.indexNames1.forEach((item, i) => {
          this.indexNames1[i].disabled = false;
          this.indexNames2[i].disabled = false;
          if (item.gId == this.beyondIncome2) item.disabled = true;
          if (item.gId == this.beyondIncome1) {
            list[0] = { id: item.id, type: item.type };
          }
          if (this.indexNames2[i].gId == this.beyondIncome1) {
            this.indexNames2[i].disabled = true;
          }
          if (this.indexNames2[i].gId == this.beyondIncome2) {
            list[1] = {
              id: this.indexNames2[i].id,
              type: this.indexNames2[i].type,
            };
          }
        });
        this.nameLegends.forEach((nl, i) => {
          // const nlc_i = this.nameLegendsCom.findIndex(nlc => nlc.key==nl.key)
          if (nl.id == list[0].id && nl.contrast_type == list[0].type) {
            this.nameLegends[i].status = true;
            this.nameLegends[i].disabled = true;
            // if(nlc_i!=-1) {
            //   this.$set(this.nameLegendsCom[nlc_i], 'status', true)
            //   this.$set(this.nameLegendsCom[nlc_i], 'disabled', true)
            // }
            key1 = nl.key;
          } else if (nl.id == list[1].id && nl.contrast_type == list[1].type) {
            this.nameLegends[i].status = true;
            this.nameLegends[i].disabled = true;
            // if(nlc_i!=-1) {
            //   this.$set(this.nameLegendsCom[nlc_i], 'status', true)
            //   this.$set(this.nameLegendsCom[nlc_i], 'disabled', true)
            // }
            key2 = nl.key;
          } else {
            this.nameLegends[i].status = false;
            // if(nlc_i!=-1) {
            //   this.$set(this.nameLegendsCom[nlc_i], 'status', false)
            //   this.$set(this.nameLegendsCom[nlc_i], 'disabled', false)
            // }
            this.legendStatus[this.nameLegends[i].key] = false;
          }
        });
      }
      this.legendStatus[key1] = true;
      this.legendStatus[key2] = true;

      this.nameKeyObj["111111"] = "超额收益";
      if (this.nameKeyList[0] != "111111") this.nameKeyList.unshift("111111");
      if (this.nameLegends[0].key != "111111") {
        this.nameLegends.unshift({
          color: "#F6BD16",
          key: "111111",
          name: "超额收益",
          status: true,
          disabled: true,
        });
      }
      this.nameLegends[0].status = true;
      this.nameLegends[0].disabled = true;
      this.legendStatus["111111"] = true;

      this.fitNetWorth_obj["111111"] = [];
      this.netWorth_obj["111111"] = [];
      let base_val, ribi_base_val; // 实盘超额，生成超额曲线时需要减去实盘的第一个值
      this.fitNetWorth_obj[key1].forEach((e, i) => {
        if (e != null && this.fitNetWorth_obj[key2][i] != null) {
          let e2 = this.fitNetWorth_obj[key2][i];
          if (this.realIntoBeyondIncome) {
            if (!ribi_base_val) ribi_base_val = e2;
            e2 = e2 - ribi_base_val;
          }
          const num = (e - e2).toFixed(2);
          this.fitNetWorth_obj["111111"].push(num);
          if (base_val == undefined) base_val = num;
          if (Number(num) > base_val) {
            base_val = Number(num);
            this.netWorth_obj["111111"].push(0);
          } else {
            this.netWorth_obj["111111"].push((num - base_val).toFixed(2));
          }
        } else {
          this.fitNetWorth_obj["111111"].push(null);
          this.netWorth_obj["111111"].push(null);
        }
      });
      this.chart && this.chart.dispose();
      this.chart1 && this.chart1.dispose();
      this.$nextTick(() => {
        this.initChart(this.fitNetWorth_obj, this.netWorth_obj);
      });
    },

    // 滑动后重新计算超额/回撤
    datazoomGetBeyondIncome(list1, list2) {
      const res = [[], []];
      let base_l2;
      list1.forEach((l1, i) => {
        const l2 = list2[i];
        if (base_l2 == undefined && l2 != null) base_l2 = l2;
        if (l1 != null && l2 != null) {
          if (this.realIntoBeyondIncome) {
            // 超额需要做显示值和实际值校准
            res[0][i] = (l1 - (l2 - base_l2)).toFixed(2);
          } else {
            res[0][i] = (l1 - l2).toFixed(2);
          }
        } else {
          res[0][i] = null;
        }
      });
      return res;
    },

    transformBeyondIncomeHandle() {
      const val = this.beyondIncome1;
      this.beyondIncome1 = this.beyondIncome2;
      this.beyondIncome2 = val;

      this.beyondIncomeHandle();
    },

    isShowRealChange(val) {
      this.reals.forEach((real) => {
        const ln_i = this.nameLegends.findIndex((nl) => nl.key == real.key);
        const ln_main_i = this.nameLegends.findIndex(
          (nl) => nl.key == real.mainKey
        );
        if (val) {
          if (
            this.nameLegends[ln_main_i].status &&
            !this.nameLegends[ln_i].status
          ) {
            this.nameLegends[ln_i].status = true;
            this.legendStatus[this.nameLegends[ln_i].key] = true;
            this.chart.dispatchAction({
              type: "legendToggleSelect",
              name: this.nameLegends[ln_i].key,
            });
          }
        } else {
          if (this.nameLegends[ln_i].status) {
            this.nameLegends[ln_i].status = false;
            this.legendStatus[this.nameLegends[ln_i].key] = false;
            this.chart.dispatchAction({
              type: "legendToggleSelect",
              name: this.nameLegends[ln_i].key,
            });
          }
        }
      });
    },

    legendHandle(key) {
      const nameLegend_status = this.nameLegends.find(
        (nl) => nl.key == key
      ).status;
      if (this.lineEcahrts_showAll && !nameLegend_status) {
        this.lineEcahrts_showAll = false;
      }
      if (this.isShowReal) {
        const real = this.reals.find((item) => item.mainKey == key);
        let real_nl_status;
        if (real) {
          real_nl_status = this.nameLegends.find(
            (nl) => nl.key == real.key
          ).status;
        }
        if (real && nameLegend_status != real_nl_status) {
          this.nameLegends.find((item) => item.key == real.key).status =
            nameLegend_status;
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name: key,
          });
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name: real.key,
          });
        } else {
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name: key,
          });
        }
      } else {
        this.chart.dispatchAction({
          type: "legendToggleSelect",
          name: key,
        });
      }
    },

    dayFreqHandle() {
      this.reals = this.reals.map((item) => {
        return {
          ...item,
          base_real_i: item._base_real_i,
          base_real: item._base_real,
        };
      });
      this.xDate = this.day_xDate;
      this.fitNetWorth_obj = this.day_fitNetWorth_obj;
      this.netWorth_obj = this.day_netWorth_obj;
      this.currentObj1 = this.fitNetWorth_obj;
      this.currentObj2 = this.netWorth_obj;
      // 如果超额曲线显示且对应指数也存在, 则保留超额曲线
      this.draw();
    },
    weekFreqHandle() {
      let res = [];
      if (this.week_xDate.length) {
        res = getWeekData(
          this.week_xDate,
          this.week_fitNetWorth_obj,
          this.week_netWorth_obj,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals
        );
      } else {
        res = getWeekData(
          this.day_xDate,
          this.day_fitNetWorth_obj,
          this.day_netWorth_obj,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals
        );
      }
      this.reals = res[3]; // 数组长度改变，实例对齐点位置重新赋值
      this.xDate = res[0];
      this.week_xDate = res[0];
      this.fitNetWorth_obj = res[1];
      this.week_fitNetWorth_obj = res[1];
      this.netWorth_obj = res[2];
      this.week_netWorth_obj = res[2];
      this.currentObj1 = this.fitNetWorth_obj;
      this.currentObj2 = this.netWorth_obj;
      this.draw();
    },
    monthFreqHandle() {
      let res = [];
      if (this.month_xDate.length) {
        res = getMonthData(
          this.month_xDate,
          this.month_fitNetWorth_obj,
          this.month_netWorth_obj,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals
        );
      } else if (this.day_xDate.length) {
        res = getMonthData(
          this.day_xDate,
          this.day_fitNetWorth_obj,
          this.day_netWorth_obj,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals
        );
      } else {
        res = getMonthData(
          this.week_xDate,
          this.week_fitNetWorth_obj,
          this.week_netWorth_obj,
          this.isIndexList,
          this.warehouseAdjustmentCycle,
          this.reals
        );
      }
      this.reals = res[3]; // 数组长度改变，实例对齐点位置重新赋值
      this.xDate = res[0];
      this.month_xDate = res[0];
      this.fitNetWorth_obj = res[1];
      this.month_fitNetWorth_obj = res[1];
      this.netWorth_obj = res[2];
      this.month_netWorth_obj = res[2];
      this.currentObj1 = this.fitNetWorth_obj;
      this.currentObj2 = this.netWorth_obj;
      this.draw();
    },
    // 绘制
    draw() {
      let tag = false;
      if (this.id == "contrastChart1") {
        const a =
          this.indexNames1.findIndex(
            (item) => item.gId == this.beyondIncome1
          ) != -1;
        const b =
          this.indexNames2.findIndex(
            (item) => item.gId == this.beyondIncome2
          ) != -1;
        tag = this.showBeyondIncome && a && b;
      } else {
        tag =
          this.showBeyondIncome &&
          this.id_index.indexOf(this.beyondIncome2) != -1;
      }
      if (this.realIntoBeyondIncome && this.realIntoBeyondIncome_name) {
        // 后加 实盘超额的判定
        const i = this.indexNames.findIndex((item) => item.id == -1);
        if (i != -1) {
          this.beyondIncome2 = -1;
          this.beyondIncome2ChangeHandle(this.beyondIncome2);
        }
      } else {
        if (tag) {
          this.beyondIncomeHandle();
        } else {
          this.chart && this.chart.dispose();
          this.chart1 && this.chart1.dispose();
          this.$nextTick(() => {
            this.initChart(this.fitNetWorth_obj, this.netWorth_obj);
          });
        }
      }
    },

    beyondIncome2ChangeHandle(val) {
      if (val != -1) {
        const tag = this.id_index.find((item) => item == val);
        this.realIntoBeyondIncome = false;
        if (!tag) {
          this.$emit("beyondIncome2Change", val);
        } else {
          this.beyondIncomeHandle();
        }
      } else {
        // 超额选取实盘，手动添加数据
        this.realIntoBeyondIncome = true;
        const i = this.indexNames.findIndex((item) => item.id == -1);
        if (i != -1) this.indexNames.splice(i, 1);
        this.beyondIncome2 = -1;
        this.indexNames.push({ id: val, name: this.realIntoBeyondIncome_name });
        this.beyondIncomeHandle();
      }
    },
    addRealIntoBeyondIncome() {
      const obj = this.nameLegends.find((item) => item.realTag);
      if (obj) {
        this.realIntoBeyondIncome_name = obj.name;
        this.realIntoBeyondIncome_data = this.fitNetWorth_obj[obj.key];
      } else {
        this.realIntoBeyondIncome_name = "";
        this.realIntoBeyondIncome_data = [];
      }
    },

    // 分类管理
    // 收益
    async findClassifyNetworthByClassifyId(classifyId, dates) {
      const res = await findClassifyNetworthByClassifyIdPlus({
        classifyId,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        realStrategySince: this.sameSectionReal,
        ...this.realquery,
      });
      this.$emit("sectionChartDate", [
        res.body[0].date,
        res.body.slice(-1)[0].date,
      ]);
      return res;
    },
    // 分类管理同区间
    async findStrategyIntersection(classifyId, dates) {
      const res = await findStrategyIntersection({
        classifyId,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        ...this.realquery,
      });
      this.$emit("sectionChartDate", [
        res.body[0].date,
        res.body.slice(-1)[0].date,
      ]);
      return res;
    },

    // 组合
    async CombManagefindNetworthById(compositionId, dates) {
      const res = await findCompositionNetworthByCompositionIdNew({
        compositionId,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        realStrategySince: this.sameSectionReal,
        ...this.realquery,
      });
      console.log("组合-分类拟合净值:", res);
      this.$emit("sectionChartDate", [
        res.body[0].date,
        res.body.slice(-1)[0].date,
      ]);
      return res;
    },
    async findClassifyIntersection(compositionId, dates) {
      const res = await findClassifyIntersection({
        compositionId,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        ...this.realquery,
      });
      console.log("组合-分类拟合净值同区间:", res);
      this.$emit("sectionChartDate", [
        res.body[0].date,
        res.body.slice(-1)[0].date,
      ]);
      return res;
    },
    async getStrategyAndCompositionByCompositionIdPlus(compositionId, dates) {
      const res = await getStrategyAndCompositionByCompositionIdPlus({
        compositionId,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        realStrategySince: this.sameSectionReal,
        ...this.realquery,
      });
      console.log("组合-策略拟合净值:", res);
      this.$emit("sectionChartDate", [
        res.body[0].date,
        res.body.slice(-1)[0].date,
      ]);
      return res;
    },
    async findCompositionStrategyIntersection(compositionId, dates) {
      const res = await findCompositionStrategyIntersection({
        compositionId,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        ...this.realquery,
      });
      console.log("组合-策略拟合净值同区间:", res);
      this.$emit("sectionChartDate", [
        res.body[0].date,
        res.body.slice(-1)[0].date,
      ]);
      return res;
    },

    //对比
    async findCompareNetworthByClassifyIdPlus(uuid, dates) {
      const res = await findCompareNetworthByClassifyIdPlus({
        uuid,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
      });
      return res;
    },
    // 对比同区间
    async findCompareIntersection(uuid, dates) {
      const res = await findCompareIntersection({
        uuid,
        indexTypes: this.id_index,
        startTime: dates ? dates[0] : "",
        endTime: dates ? dates[1] : "",
        ...this.realquery,
      });
      return res;
    },

    // 记录图例状态
    savaLegendStatus(obj) {
      this.legendStatus = {};
      Object.keys(obj).map((key) => {
        const status = obj[key];
        if (!status) this.legendStatus[key] = status;
      });
    },
    // 清除图例不可选状态
    clearNameLegendsDisabled() {
      this.nameLegends.forEach((item, i) => {
        if (item.key != "111111") {
          this.nameLegends[i] = {
            ...item,
            disabled: false,
          };
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.incomeRateChart {
  .chart {
    width: calc(100% - 432px);
    position: relative;
    .tip {
      position: absolute;
      bottom: 76px;
      left: calc(100% - 180px);
      color: #666;
      p {
        text-align: right;
      }
    }
  }
  .control {
    position: relative;
    width: 432px;
    display: flex;
    flex-direction: column;
    margin-left: 24px;
    height: 586px;
    .beyondIncome {
      .shortline {
        width: 20px;
        border: 1px solid #d9d9d9;
      }
    }
    .showReal {
      padding: 0 13px 0 14px;
    }
    .legend {
      // margin-top: 15px;
      min-width: 432px;
      height: 100%;
      overflow: auto;
      background: #fafafa;
      border-radius: 8px;
      .card {
        height: 48px;
        cursor: pointer;
        padding: 0 13px 0 14px;
        box-shadow: inset 0px -1px 0px 0px #f0f0f0;
        &:hover {
          background: #ffffff;
          box-shadow: inset 0px -1px 0px 0px #f0f0f0;
        }
        .left {
          width: 240px;
        }
        .right {
          width: 150px;
          font-size: 12px;
          color: #8c8c8c;
          p {
            text-align: right;
          }
        }
        .legend-name {
          .line {
            width: 28px;
            margin-left: 6px;
          }
        }
      }
    }
    .legend-name {
      .line {
        width: 28px;
        margin-left: 6px;
      }
    }
    .mt16 {
      margin-top: 16px;
    }
    .icon-zhihuan {
      color: #1890ff;
      cursor: pointer;
    }
    .fillcard {
      height: 48px;
    }
    .showAll {
      width: 99.8%;
      line-height: 48px;
      background: rgba(166, 166, 166, 0.4);
      border-radius: 0px 0px 8px 8px;
      position: absolute;
      bottom: 0;
      text-align: center;
      margin: 0 auto;
    }
  }
}
</style>
